<template>
  <div ref="root" @click="popup" @blur="blur" style="position: relative;">
    <JInput ref="inputBox" :readonly="true" :value="inputValue" @blur="bluro">
      <div slot="suffix" style="font-size: 0.2em;" >
        <svg width="10px" height="5px" style="vertical-align:middle;">    
            <polygon points="1,0 1,5 4,2.5" transform="translate(7.5,0) rotate(90)" fill="var(--theme-primary-color)" stroke-width="0"/>
        </svg>
      </div>
    </JInput>
    <div v-show="showpopup" ref="items"  style="position: absolute;width: 100%;;" >
      <div  style="position: absolute;z-index: 9999;width:calc(100% - 5px);left:3px;background-color: white;outline: 1px solid var(--theme-primary-color);" 
      >
        <div v-for="(item) in options" :key="item.value" :value="item.value" style="font-size: 0.8em;" class="item" @click="(e)=>selectItem(e,item)" >
          <div >{{item.label}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JInput from '../JInput/JInput.vue';
export default {
  components: { JInput },
  data() {
    return {
      showpopup:false,
      inputValue:'',
      isFocused:false
    }
  },
  props:{
    value:{        
      default:''
    },
    options:{
        type:Array,
        default:()=>{
            return [];
        }
    }
  },
  mounted(){
    this.$refs.inputBox.focus()
    if(this.value!='')
    this.inputValue = this.options.filter(t=>t.value == this.value)[0].label;
    // this.$refs.selectControl.focus();
  },
  methods:{
    selectChange(e){
        this.$emit('input',e.target.value);
        this.$emit('selectChange',e.target.value);
    },
    popup(){      
      this.$refs.inputBox.focus()
      this.showpopup=true;
    },
    blur(){
      this.showpopup = false;      
      this.$emit('blur');
    },
    bluro(e){
      if(!this.showpopup)
      {
        this.$emit('blur',e);
      }else{
        setTimeout(()=>{
          this.showpopup=false;
          this.$emit('blur',e);
        },300)
      }

//      }
    },
    selectItem(e,item){
      e.stopPropagation()
      this.$emit('input',item.value);
      this.$emit('selectChange',item.value);
      this.inputValue = item.label;
      this.showpopup = false;
      this.$refs.inputBox.focus()

      // this.$emit('blur');

    }
  }
}
</script>
<style>
:root{
    --primary-color: var(--theme-primary-color, #0066ff);
}
</style>
<style scoped>
.mainSelect{
    height: 1.5em;
    border: 1px solid var(--primary-color);
    border-radius: 2px;
    outline: none;
    width:100%;
}
select::-webkit-select-popup {
  background-color: rgb(40, 237, 145);
  border: 1px solid #ccc;
}
.item{
  cursor: pointer;
}
.item :hover{
  background-color: var(--primary-color);
  color:var(--theme-obprimary-color, white);
}
</style>